<template>
	<view class="login">
		<view>
			<u-toast ref="uToast" />
		</view>
		<h2>欢迎登录！</h2>
		<!-- 手机号码 -->
		<label>
			<view class="text">
				手机号码：
			</view>
			<view class="phone">
				<u-input v-model="phone" type="text" placeholder-style="color:#C7C7C7;font-size: 24rpx"
					placeholder="请输入手机号" maxlength="11" />
			</view>
		</label>
		<!-- 密码 -->
		<label>
			<view class="text">
				密码：
			</view>
			<view class="password">
				<u-input v-model="password" type="password" placeholder-style="color:#C7C7C7;font-size: 24rpx"
					placeholder="请输入6位或6位以上密码" :clearable="false" />
			</view>
		</label>

		<!-- 用户协议 -->
		<label>
			<view class="user-tip">
				<u-checkbox-group icon-size="16">
					<u-checkbox v-model="checked" active-color="#FC5E14">
						<text>阅读并同意<text class="agreement">《软件服务条款》</text>和<text
								class="agreement">《用户隐私协议》</text></text>
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</label>

		<!-- 登录按钮 -->
		<view @click="login">
			<button class="submit" :class="{canlogin: canLogin}">登录</button>
		</view>

		<!-- 注册和找回密码 -->
		<view class="selected">
			<text @click="register">注册账户</text>
			<text @click="forget">找回密码</text>
		</view>
	</view>
</template>

<script>
	import {
		phoneValidator,
		pwdValidator
	} from '@/util/validator.js'
	import request from '@/util/request.js'
	export default {
		data() {
			return {
				phone: '',
				password: '',
				checked: false
			}
		},
		computed: {
			canLogin() {
				if (this.checked && this.password !== "" && this.phone !== "") return true
				return false
			}
		},
		methods: {
			show(title, type, duration, callback) {
				this.$refs.uToast.show({
					title,
					type,
					duration: duration ? duration : 2000,
					position: "top",
					callback: callback ? callback : () => {}
				})
			},
			// 登录
			login() {
				if (!this.canLogin) {
					if (this.phone == "" || this.password == "") {
						return this.show("请填写手机号或密码", "warning")
					}
					return this.show("请勾选用户协议", "warning")
				}
				if (!phoneValidator(this.phone, this.show)) {
					return
				}
				if (!pwdValidator(this.password, this.show)) {
					return
				}
				// 发起登录请求
				request.globalRequest({
					url: '/api/public/member/login',
					method: "post",
					data: {
						phone: this.phone,
						password: this.password,
						timestamp: new Date().getTime()
					}
				}).then(res => {
					console.log(res);
					if (res.status == "error.1000") {
						this.show(res.message, "warning", 2000)
					} else {
						// 登录成功讲用户token保存在本地
						uni.setStorage({
							key: "usertoken",
							data: res.userToken,
							success: () => {
								this.show("登录成功", "success", 1000, () => {
									uni.switchTab({
										url: "/pages/user/user"
									})
								})
							}
						})

					}
				})

			},
			// 注册
			register() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			// 找回密码
			forget() {
				uni.navigateTo({
					url: '/pages/forgetpwd/forgetpwd'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100vw;
		padding: 20rpx 40rpx 0;

		h2 {
			color: #494949;
			font-size: 50rpx;
			font-weight: 500;
			margin-top: 20rpx;
			padding: 20rpx 0;
			margin-bottom: 20rpx;
		}

		label {
			color: #C7C7C7;
			font-size: 24rpx;
			display: block;
			margin-bottom: 20rpx;
		}

		.phone,
		.password {
			margin-top: 10rpx;
			border-radius: 999rpx;
			border: 1px solid #FC5E14;
			padding: 0 40rpx;
			line-height: 10px;

			.u-input {
				align-items: center;
			}
		}

		.user-tip {
			color: #000;
			font-weight: 700;
			margin-top: 40rpx;

			text {
				font-size: 24rpx;
			}

			.agreement {
				color: #FC5E14;
			}
		}

		.submit {
			height: 70rpx;
			line-height: 70rpx;
			color: #fff;
			font-size: 28rpx;
			border-radius: 999rpx;
			background-color: #DEDEDE;
			margin-top: 80rpx;
			border: 1px solid #DEDEDE;
		}

		.canlogin {
			background-color: #FC5E14;
			border-top-color: #FC5E14;
		}

		.selected {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			margin-top: 30rpx;
			font-size: 28rpx;
			color: #FC5E14;
		}

	}
</style>
